<template>
  <div ref="target" class="w-full flex-1"></div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';

// 引入地图
import mapJson from '../assets/MapData/china.json';
import * as echarts from 'echarts';
const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

// watch(() => props.data, renderChart());

// 1、初始化echart实例
let myChart = null;
const target = ref(null); // 此处的target与div中的ref=“target”一致
onMounted(() => {
  // 注册地图
  echarts.registerMap('china', mapJson);
  myChart = echarts.init(target.value);
  renderChart();
});

// 2、构建option配置对象
const renderChart = () => {
  const options = {
    // 时间线
    timeline: {
      data: props.data.voltageLevel,
      axisType: 'category',
      autoPlay: true,
      playInterval: 3000,
      left: '10%',
      right: '10%',
      bottom: '0%',
      width: '80%',
      label: {
        normal: {
          textStyle: {
            color: '#ddd',
          },
        },
        emphasis: {
          textStyle: {
            color: '#fff',
          },
        },
        symbolSize: 10,
        lineStyle: {
          color: '#555',
        },
        checkpointStyle: {
          borderColor: '#888',
          borderWidth: 2,
        },
        // 控件样式
        controlStyle: {
          showNextBtn: true,
          showPrevBtn: true,
          normal: {
            color: '#666',
            borderColor: '#666',
          },
          emphasis: {
            color: '#aaa',
            borderColor: '#aaa',
          },
        },
      },
    },
    // 柱形图展示范围
    baseOption: {
      grid: {
        right: '2%',
        top: '15%',
        bottom: '10%',
        width: '20%',
      },

      // 地图配置
      geo: {
        show: true,
        map: 'china',
        roam: true, // 开启缩放
        zoom: 0.8, // 初始缩放值
        center: [113.83531246, 34.0267395887], // 中心点
        // 默认下省份的样式
        itemStyle: {
          normal: {
            borderColor: 'rgba(147, 235, 248, 1)',
            borderWidth: 1,
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(147, 235, 248, 0)',
                },
                {
                  offset: 1,
                  color: 'rgba(147, 235, 248, 0.2)',
                },
              ],
            },
          },
          emphasis: {
            areaColor: '#389bb7',
            borderWidth: 0,
          },
        },
      },
    },
    // 绑定时间轴下的多个图标， 用一个循环给option注入配置项
    options: [],
  };
  console.log('options.options', options.options);
  props.data.voltageLevel.forEach((item, index) => {
    options.options.push({
      backgroundColor: '#142037',
      // 左右两个标题
      title: [
        {
          text: '2019-2023 年度数据统计',
          left: '0%',
          top: '0%',
          textStyle: {
            color: '#ccc',
            fontSize: 30,
          },
        },
        {
          id: 'statistic',
          text: item + '年数据统计情况',
          right: '0%',
          top: '4%',
          textStyle: {
            color: '#ccc',
            fontSize: 20,
          },
        },
      ],
      // 配置右边柱状图图
      xAxis: {
        type: 'value',
        // scale 只在type为value时有效，是否脱离0值比例，为true，坐标刻度不会强制包含0刻度
        scale: true,
        position: 'top',
        // 坐标轴在 grid 区域中的分隔线 是否显示分隔线。默认数值轴显示，类目轴不显示。
        splitline: {
          show: false,
        },
        // 不显示轴线
        axisLine: {
          show: false,
        },
        // 不显示颗度
        axisTick: {
          show: false,
        },
        axisLabel: {
          margin: 2,
          textStyle: {
            color: '#aaa',
          },
        },
      },
      yAxis: {
        type: 'category',
        // 坐标轴轴线相关设置
        axisLine: {
          show: true,
          lineStyle: {
            color: '#ddd',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0, // 强制设置坐标轴分割间隔
          textStyle: {
            color: '#ddd',
          },
        },
        // 拿当前年份下的数据
        data: props.data.categoryData[item].map((item) => item.name),
      },
      series: [
        {
          type: 'bar',
          zlevel: 1.5,
          itemStyle: {
            normal: {
              color: props.data.colors[index],
            },
          },
          data: props.data.categoryData[item].map((item) => item.value),
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo', // 坐标系
          data: props.data.topData[item], // 每个年份的数据 [117.4219, 39.4189, 84.1],前两个值是坐标系，第三个是数值
          // 每个点的大小，根据情况计算
          symbolSize: function (val) {
            return val[2] / 6;
          },
          showEffectOn: 'render', // 配置何时显示特效 'render' 绘制完成后显示特效;'emphasis' 高亮（hover）的时候显示特效。
          // 涟漪特效相关配置。
          rippleEffect: {
            brushType: 'stroke', // 波纹的绘制方式，可选 'stroke' 和 'fill'
          },
          label: {
            normal: {
              formatter: '{b}',
              position: 'right',
              show: true,
            },
          },
          itemStyle: {
            normal: {
              // 颜色根据柱形图改变
              color: props.data.colors[index],
              shadowBlur: 5, // 阴影
              shadowColor: props.data.colors[index],
            },
          },
        },
      ],
    });
  });

  // 3、通过实例.setOption
  myChart.setOption(options);
};
</script>
<style lang="scss" scoped></style>
